<section id="wx-config">
  <div class="wx-header">公众号配置</div>

  <div class="container">
    <div class="wx-gzh">
      <div class="logo pull-left"><img :src="wxGZHdata.img+'?w=108&h=108'" /></div>
      <div class="pull-left pl-24 information">
        <div><strong class="color-999">{{wxGZHdata.name || '--'}}</strong>
        <span>(对<span v-if="wxGZHdata.type == 'I'">内</span><span v-if="wxGZHdata.type == 'O'">外</span>账号)</span></div>
        <div>绑定时间：{{wxGZHdata.createTime | timestamp}}</div>
        <div>绑定人：{{wxGZHdata.userName || '--'}}</div>
      </div>
    </div>
    <div class="config">
      <div class="subnav-wx">
        <ul>
          <li
            v-for="(item, index) in navLiData"
            @click="navButton(index)"
            v-if="item.code"
            :class="{active: index == navAct}">{{item.name}}</li>
        </ul>
      </div>
      <div class="nav-content">
        <!-- 模板配置 -->
        <div class="br-4" style="border:1px solid #E5E5E5" v-if="navAct == 0">
          <div class="dy-flex text-center global_table_title">
            <div class="dy-fx-1">序号</div>
            <div class="dy-fx-3">消息名称</div>
            <div class="dy-fx-5">微信消息模板ID</div>
            <div class="dy-fx-1">操作</div>
          </div>
          <div
            v-for="(item, index) in wxGZHtpData"
            v-if="item.type == wxGZHdata.type"
            class="dy-flex text-center border-t global_table_item">
            <div class="dy-fx-1 border-r">{{index+1 | toDou}}</div>
            <div class="dy-fx-3 border-r">{{item.name}}</div>
            <div class="dy-fx-5 border-r">
              <input type="text" class="wxtemplateId" v-if="item.flag" v-model="item.templateId">
              <span v-if="!item.flag">{{item.templateId || '--'}}</span>
            </div>
            <div class="dy-fx-1">
              <a href="javascript:;" v-if="!item.flag && (permissions.indexOf('c100') > -1)" @click="saveWxTp('true', index)">编辑</a>
              <a href="javascript:;" v-else-if="!(permissions.indexOf('c100') > -1)">--</a>
              <a href="javascript:;" v-if="item.flag" @click="saveWxTp('false', index, item.id, item.templateId)">保存</a>
            </div>
          </div>
        </div>
        <!-- 项目配置 -->
        <div class="project" v-if="navAct == 1 && permissions.indexOf('c101') > -1">
          <div class="title">
            <p class="pull-left">项目列表</p>
            <hl-button size="mini" class="pull-right" @on-click="getUserPro">管理</hl-button>
          </div>
          <ul class="list">
            <li v-for="(item, index) in wxGZHproData">
              <a href="javascript:;">
                <p>{{item.name}}({{item.building}})</p>
                <img :src="item.preview+'?w=203&h=148'" alt=""></a>
            </li>
          </ul>
        </div>
        <!-- 关注列表 -->
        <div class="focus-on" v-if="navAct == 2">
          <div class="clearfix">
            <div class="pull-left"><span v-if="wxGZHdata.type == 'I'">员工(账号)</span><span v-if="wxGZHdata.type == 'O'">客户</span></span>列表</div>
            <div class="pull-right">
              <input type="text" class="form-control inline" placeholder="姓名/账号/电话" v-model="seaName">
              <hl-button size="mini" @on-click="getFocusOnList">查询</hl-button>
              <hl-button size="mini" @on-click="resetWXfocus">重置</hl-button>
            </div>
          </div>
          <div class="mt-10 br-4 box-i-shadow-2">
            <div class="clearfix acc-head text-center dy-flex global_table_title">
              <div class="dy-fx-1">序</div>
              <div class="dy-fx-2">姓名</div>
              <div class="dy-fx-3" v-if="wxGZHdata.type == 'I'">账号</div>
              <div class="dy-fx-3">电话</div>
              <div class="dy-fx-3">微信昵称</div>
              <div class="dy-fx-3">openID</div>
              <div class="dy-fx-2">操作</div>
            </div>
            <div
              v-for="(item, index) in WXfocusOnData[typeIO]"
              class="clearfix acc-head text-center border-t dy-flex global_table_item">
              <div class="dy-fx-1 border-r">{{index+1 | toDou}}</div>
              <div class="dy-fx-2 border-r">{{item.name}}</div>
              <div class="dy-fx-3 border-r" v-if="wxGZHdata.type == 'I'">{{item.account}}</div>
              <div class="dy-fx-3 border-r">{{item.phone}}</div>
              <div class="dy-fx-3 border-r">{{item.wxNickName || '--'}}</div>
              <div class="dy-fx-3 border-r ellipsis-1" @click="copyOpenId(item)">{{item.openId || '--'}}</div>
              <div class="dy-fx-2">
                <a href="javascript:;" v-if="item.openId && (permissions.indexOf('c103') > -1)" @click="JBwx(item)">解除绑定</a>
                <a href="javascript:;" v-else-if="(permissions.indexOf('c102') > -1) && !item.openId" @click="getSMWx(item.id, item.name)">添加绑定</a>
                <span v-else>--</span>
              </div>
            </div>
          </div>
          <div class="user-page ptb-10 clearfix">
            <div class="pull-left user-page-num">
              <span class="font-14">共<i>{{WXfocusOnData.totalCount}}</i>条记录</span>
              <span>每页
                <div class="select-ul pagenums">
                  <span class="select-name br-4 box-i-shadow">{{pagesCur}}</span>
                  <ul>
                    <li v-for="item in pages" @click="limitPage(item)">{{item}}</li>
                  </ul>
                </div>
                条
            </span>
            </div>
            <div class="pull-right">
              <ul class="page" id="page"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 授权项目 -->
  <div class="mark-wx" v-if="userProFlag"></div>
  <div class="toast-wx-project" v-if="userProFlag">
    <div class="close"><i class="icon-Gm-close" @click="closePro"></i></div>
    <div class="title">项目管理</div>
    <div class="clearfix plr-24 bg-f7f7f7 line-height-45">
      <div class="pull-left" style="width:600px;">项目列表</div>
      <div class="pull-right" style="width:224px;">已选列表</div>
    </div>
    <div class="clearfix plr-24 bg-f7f7f7">
      <div class="pull-left memeber-list box-i-shadow-1 br-4 text-center">
        <div class="dy-flex">
          <div class="dy-fx-1"><span :class="{checkAll:true, cursor:true, active:checkAllFlag}" @click="checkAllPro"></span></div>
          <div class="dy-fx-3">大区</div>
          <div class="dy-fx-3">公司</div>
          <div class="dy-fx-3">项目</div>
        </div>
        <div
          :class="{'dy-flex':true, 'border-t':true, 'color-999':item.flag1}"
          v-for="(item, index) in userProData">
          <div class="dy-fx-1">
            <span :class="{checkAll: true, cursor:true, active: item.flag}" v-if="!item.flag1" @click="checkRadio(item, index)"></span>
            <span class="checks" v-if="item.flag1"></span>
          </div>
          <div class="dy-fx-3">{{item.areaName}}</div>
          <div class="dy-fx-3 ellipsis-1">{{item.companyName}}</div>
          <div class="dy-fx-3">{{item.projectName}}</div>
        </div>
      </div>
      <div class="pull-right sidebar-list box-i-shadow-1 br-4 text-center">
        <div class="dy-flex">
          <div class="dy-fx-1">序</div>
          <div class="dy-fx-3">项目</div>
          <div class="dy-fx-2">操作</div>
        </div>
        <div
          :class="{'dy-flex':true, 'border-t':true}"
          v-for="(item, index) in putUserData">
          <div class="dy-fx-1">{{index+1}}</div>
          <div class="dy-fx-3 ellipsis-1">{{item.projectName}}</div>
          <div class="dy-fx-2">
            <i class="icon-Gm-delete" @click="checkPro(item.projectId, index)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix plr-24 bg-f7f7f7 line-height-45 border-b">
      <div class="pull-left" style="width:600px;">共<span>{{userProData.length}}</span>条记录</div>
      <div class="pull-right" style="width:224px;">共<span>{{putUserData.length}}</span>条记录</div>
    </div>
    <div class="operation">
      <hl-button  type="primary" @on-click="configPro">保存</hl-button>
      <hl-button type="outline" @on-click="closePro">取消</hl-button>
    </div>
  </div>

  <!-- 扫描二维码 -->
  <div class="e-mark" v-show="SmWxFlag"></div>
  <div class="erweima" v-show="SmWxFlag">
    <div class="close" @click="closeWXewm"><i class="icon-Gm-close"></i></div>
    <div id="qrcode" style="width:180px; height:180px; margin: 70px auto 20px;"></div>
    <div class="text-center">
      <p>绑定微信</p>
      <p>扫描完成绑定</p>
    </div>
  </div>

</section>
<script src="modules/wx_gzh/scripts/wxConfig.js" charset="utf-8"></script>
